<template>
  <view class="content">
    <view class="m-userName">
      <image src="../../static/userIcon.png" class="m-userIcon" />用户名
    </view>
    <view class="m-myOptions">
      <view class="u-option">
        <image src="../../static/icon7.png" />我的预约
      </view>
      <view class="u-option">
        <image src="../../static/icon6.png" />我的关注
      </view>
    </view>
    <view class="m-list">
      <view class="u-list">
        <image src="../../static/icon8.png" />
				联系客服
      </view>
			<view class="u-list">
        <image src="../../static/icon9.png" />
				关于我们
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  data() {
    return {};
  },
  onLoad() {},
  methods: {}
});
</script>

<style lang="scss">
.g-my {
  overflow: hidden;
}
.m-userName {
  overflow: hidden;
  font-size: 33upx;
  color: #fff;
  margin-top: 50upx;
}
.m-userIcon {
  width: 118upx;
  height: 118upx;
  vertical-align: middle;
  display: inline-block;
  margin: 0 40upx;
}
.m-myOptions {
  background: #fff;
  margin-top: 45upx;
  border-radius: 40upx;
  overflow: hidden;
}
.u-option {
  width: 50%;
  float: left;
  height: 150upx;
  text-align: center;
  // line-height: 150upx;
  color: #000000;
  font-size: 30upx;
  position: relative;
  &::after {
    content: " ";
    width: 2upx;
    height: 75upx;
    background: #dbdbe0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  image {
    width: 36upx;
    height: 32upx;
    display: block;
    margin: 35upx auto 20upx;
  }
}
.m-list {
  background: #fff;
  margin-top: 45upx;
  border-radius: 40upx;
  overflow: hidden;
}
.u-list {
  height: 120upx;
  line-height: 120upx;
  color: #000000;
  font-size: 30upx;
	padding:  0 30upx;
	position: relative;
	border-bottom: 1upx solid #ededef;
	&:last-child {
		border: none;
	}
	&::after {
		content: " ";
		position: absolute;
		width: 18upx;
		height: 31upx;
		background: url("../../static/icon10.png");
		background-size: 100% 100%;
		right: 30upx;
		top: 50%;
		transform: translateY(-50%);
	}
  image {
    height: 36upx;
    width: 36upx;
    display: inline-block;
    vertical-align: middle;
		margin-right: 20upx;
  }
}
</style>
